<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <!-- <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/firstpage.css">
    <script src="js/jquery-3.6.0.min.js"></script> -->
    <!-- <script src="js/firstPage.js"></script> -->

</head>

<body  >

    <!-- Modal -->
    <div class="zhuye">
      <div class="modal fade" id="zhuye" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
              今日的每日一测数据我们已经为您准备好啦，赶紧来测试吧！
              <div class="text">
                <a>立即去测试</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  


    <!-- 头部 -->
    <header>
        <div class="box">
            <div class="left">
                <div class="logo">

                </div>
                <span>蜗牛考试系统 </span>
            </div>
            <div class="right">
                <div class="circle">

                </div>
                <span id="firstName">蜗牛测试账号</span>
                <a href="" data-toggle="modal" data-target="#staticBackdrop">
                    <div class="logo"></div>


                </a>
                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                    aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">资料修改</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="mbox">
                                    <div class="title">
                                        你可以在这里对个人资料进行修改完善
                                    </div>
                                    <div class="phone">
                                        手机号：&nbsp;&nbsp;&nbsp;&nbsp; <span id="phone">xxxxxxxxxxx</span>  &nbsp;&nbsp;&nbsp;&nbsp;<span>*
                                            手机号暂时不允许修改，如需修改 请联系我们</span>
                                    </div>
                                    <div class="img">
                                        设置头像：
                                        <div class="box">
                                            <img src="./images/whk/u375.png" alt="" id="touXiang" width="50px" height="50px">
                                        </div>
                                        <input type="file" placeholder="上传头像" id="fileImg">
                                    </div>
                                    <div class="name" >
                                        姓名： &nbsp;&nbsp;&nbsp; <input type="text" id="name">
                                    </div>
                                    <div class="sex" id="gender">
                                        性别： &nbsp;&nbsp;&nbsp;<input type="radio" name="sex" id="man"> <label
                                            for="man">男 </label>
                                        <input type="radio" name="sex" id="woman"> <label for="woman">女</label>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="userUpdate" >保存提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 导航4个 -->
    <div class="box" id="testTypesShow">
        <a href="">
            <div class="smallBox">
                <span>正式考试</span>
                <div class="logo"></div>
            </div>
        </a>
        <a href="">
            <div class="smallBox">
                <span>模拟考试</span>
                <div class="logo"></div>
            </div>
        </a>
        <a href="">
            <div class="smallBox">
                <span>每日一测</span>
                <div class="logo"></div>
            </div>
        </a>
        <a href="">
            <div class="smallBox">
                <span>顺序练习</span>
                <div class="logo"></div>
            </div>
        </a>
        <a href="">
            <div class="smallBox">
                <span>分类练习</span>
                <div class="logo"></div>
            </div>
        </a>

    </div>

    <!-- 内容 -->
    <main>
        <nav>
            <div class="left">
                <a href="#" class="active" data="tab1">首页</a>

                <a href="#" class="off" data="tab2">我的收藏(共 <span class="myCollection">23</span> )</a>
                <a href="#" class="off" data="tab3">错题库(共 <span class="myError">23</span>)</a>
            </div>
            <div class="box4">
                <a class="right" data-toggle="modal" data-target="#paihang">
                    <div class="logo"></div>
                    <span> 排行榜</span>
                </a>
                <!-- Modal -->
                <div class="zhuye">
                    <div class="modal fade" id="paihang" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div class="box">
                                        <h5>正式考试排行 TOP10</h5>
                                        <select name="" id="allTests">
                                            <option value="">2019年xxxxx第三季度电力知识模拟考试</option>
                                            <option value="" selected>2019年xxxxx第三季度电力知识模拟考试</option>
                                            <option value="">2019年xxxxx第三季度电力知识模拟考试</option>
                                        </select>
                                    </div>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body" id="userRanking">
                                    <div class="paiming">
                                        <div class="left">
                                            <p>未上榜</p>
                                            <p>我自己</p>
                                        </div>
                                        <p>98分</p>
                                    </div>
                                    <div class="paiming2">
                                        <div class="left">
                                            <p>未上榜</p>
                                            <p>我自己</p>
                                        </div>
                                        <p>98分</p>
                                    </div>
                                    <div class="paiming2">
                                        <div class="left">
                                            <p>未上榜</p>
                                            <p>我自己</p>
                                        </div>
                                        <p>98分</p>
                                    </div>
                                    <div class="paiming2">
                                        <div class="left">
                                            <p>未上榜</p>
                                            <p>我自己</p>
                                        </div>
                                        <p>98分</p>
                                    </div>
                                    <div class="paiming2">
                                        <div class="left">
                                            <p>未上榜</p>
                                            <p>我自己</p>
                                        </div>
                                        <p>98分</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </nav>
        <!-- 首页内容 -->
        <div class="tab" id="tab1">
            <div class="tabtop">
                <div class="left">
                    <div class="left-top">
                        数据看板
                    </div>
                    <div class="left-bot">
                        <div class="box">
                            <span>138</span>
                            <p>练习题数</p>
                        </div>
                        <div class="box">
                            <span>38</span>
                            <p>学习天数</p>
                        </div>
                        <div class="box">
                            <span>77</span>
                            <p>最近考试</p>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right-top">
                        <span>今日未学习</span>
                        <label for=""></label>
                    </div>

                    <div class="right-bot">
                        <span class="studyDay">
                            12
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            13
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            14
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            15
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            16
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            17
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            18
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                        <span class="studyDay">
                            19
                            <img src="dximages/主页/u67.svg" alt="" width="10px">
                        </span>
                    </div>
                </div>
            </div>
            <div class="tabbottom">
                <div class="line">
                    <span>通知公告</span>
                    <select name="" id="">
                        <option value="">全部</option>
                        <option value="">已读</option>
                        <option value="">未读</option>
                    </select>
                </div>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>
                <a href="">
                    <div class="line">
                        <div class="left">
                            <span>
                                中央第十一巡视组巡视有限责任公司党组工作动员会召开</span>
                            <p>[未读]</p>
                        </div>
                        <div class="right">
                            2019-04-23 12:34
                        </div>

                    </div>
                </a>

                <button>查看更多数据</button>
            </div>
        </div>
        <!-- 我的收藏 -->
        <div class="tab" id="tab2">
            <div class="tab2-left">
                <div class="examTi show" id="t1">
                    <dl>
                        <dt>1题目题目题目题目题目题目题目题目题目</dt>
                        <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeErr"><span>B</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeYes"><span>C</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                    </dl>
                    <div class="buttonbox">
                        <button class="delExam">取消收藏</button>
                        <button class="preExam">上一题</button>
                        <button class="nextExam">下一题</button>
                    </div>
                    <div class="keyanswer">

                        <p>
                            <span>正确答案:</span>
                            <span class="corG">B</span>

                        </p>
                        <p>
                            <span>解析:</span>
                            <span class="col9">正确答案正确答案正确答案正确答案正确答案</span>

                        </p>
                    </div>
                </div>
                <div class="examTi" id="t2">
                    <dl>
                        <dt>2题目题目题目题目题目题目题目题目题目</dt>
                        <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeErr"><span>B</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeYes"><span>C</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                    </dl>
                    <div class="buttonbox">
                        <button class="delExam">取消收藏</button>
                        <button class="preExam">上一题</button>
                        <button class="nextExam">下一题</button>
                    </div>
                    <div class="keyanswer">

                        <p>
                            <span>正确答案:</span>
                            <span class="corG">B</span>

                        </p>
                        <p>
                            <span>解析:</span>
                            <span class="col9">正确答案正确答案正确答案正确答案正确答案</span>

                        </p>
                    </div>
                </div>


            </div>

            <div class="tab2-right">
                <div class="top">
                    <span>题卡</span>
                    <p>共<span class="myCollection">12</span>题</p>

                </div>
                <div class="center" id="checkCollectExam">
                    <div class="box active" data="t1">
                        1
                    </div>
                    <div class="box" data="t2">
                        2
                    </div>
                    <div class="box">
                        3
                    </div>
                    <div class="box">
                        4
                    </div>
                    <div class="box">
                        5
                    </div>
                    <div class="box">
                        6
                    </div>
                </div>
                <div class="foot">
                    <span>默认显示解析</span>
                    <input type="checkbox" checked class="jieXiShow">
                </div>
            </div>

        </div>
        <div class="tab" id="tab3">
            <div class="tab2-left">
                <div class="examTi show" id="c1">
                    <dl>
                        <dt>1题目题目题目题目题目题目题目题目题目</dt>
                        <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeErr"><span>B</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeYes"><span>C</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                    </dl>
                    <div class="buttonbox">
                        <button class="collectExam">收藏</button>
                        <button class="markExam">标记已学会</button>
                        <button class="preExam">上一题</button>
                        <button class="nextExam">下一题</button>
                    </div>
                    <div class="keyanswer">
                        <p>
                            <span>考生答案:</span>
                            <span>B</span>
                            <span class="isCorrect isYes"></span>
                        </p>
                        <p>
                            <span>正确答案:</span>
                            <span class="corG">B</span>

                        </p>
                        <p>
                            <span>解析:</span>
                            <span class="col9">正确答案正确答案正确答案正确答案正确答案</span>

                        </p>
                    </div>
                </div>
                <div class="examTi" id="c2">
                    <dl>
                        <dt>2题目题目题目题目题目题目题目题目题目</dt>
                        <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeErr"><span>B</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd class="activeYes"><span>C</span><span>答案答案答案答案答案答案答案答案答案答案</span></dd>
                        <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案</span></dd>
                    </dl>
                    <div class="buttonbox">
                        <button class="collectExam">收藏</button>
                        <button class="markExam">标记已学会</button>
                        <button class="preExam">上一题</button>
                        <button class="nextExam">下一题</button>
                    </div>
                    <div class="keyanswer">
                        <p>
                            <span>考生答案:</span>
                            <span>B</span>
                            <span class="isCorrect isYes"></span>
                        </p>
                        <p>
                            <span>正确答案:</span>
                            <span class="corG">B</span>

                        </p>
                        <p>
                            <span>解析:</span>
                            <span class="col9">正确答案正确答案正确答案正确答案正确答案</span>

                        </p>
                    </div>
                </div>


            </div>

            <div class="tab2-right">
                <div class="top">
                    <span>题卡</span>
                    <p>共<span class="myError">12</span>题</p>

                </div>
                <div class="center" id="errorExam">
                    <div class="box active" data="c1">
                        1
                    </div>
                    <div class="box" data="c2">
                        2
                    </div>
                    <div class="box">
                        3
                    </div>
                    <div class="box">
                        4
                    </div>
                    <div class="box">
                        5
                    </div>
                    <div class="box">
                        6
                    </div>
                </div>
                <div class="foot">
                    <span>默认显示解析</span>
                    <input type="checkbox" checked class="jieXiShow">
                </div>
            </div>
        </div>
        <!-- <div class="tab"></div> -->
    </main>

</body>

</html>